<!-- 提现订单查询 -->
<template>
    <div>
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="48">
                    <a-col :md="8" :sm="24">
                        <a-form-item label="手机号">
                            <a-input v-model="phone" allow-clear placeholder="请输入用户手机号" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="用户姓名">
                            <a-input v-model="userName" allow-clear placeholder="请输入用户姓名" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="订单号">
                            <a-input v-model="orderCode" allow-clear placeholder="请输入订单号" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="类型">
                            <a-select v-model="accountType" placeholder="请选择" allowClear @change="getData">
                                <a-select-option v-for="(item,i) in accountTypeList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="审核状态">
                            <a-select v-model="orderStatus" placeholder="请选择" allowClear @change="getData">
                                <a-select-option v-for="(item,i) in orderStatusList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item >
                            <a-button type="primary" @click="getData()">查询</a-button>
                            <a-button style="margin-left: 20px" type="" icon="upload" @click="downloadData()">导出数据</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>

        <a-table rowKey="id" :loading="isload" :columns="columns" :data-source="dataList" @change="handleTableChange" :pagination="{ pageSize: 10, total: total ,showSizeChanger: true,pageSize: size}" size="small" :scroll="{ x: 1800, }">
            <div slot="amount" slot-scope="amount">
                <span>{{amount}}</span>
            </div>
            <div slot="realAmount" slot-scope="realAmount,record">
                <span v-if="record.orderStatus == 6">{{realAmount}}</span>
                <span v-else>-</span>
            </div>
            <div slot="accountType" slot-scope="accountType">
                <div v-for="(item,i) in accountTypeList" :key="item.id + 'i'">
                    <a-tag v-if="item.id == accountType" :color="colors[i%13]">{{item.name}}</a-tag>
                </div>
            </div>
            <div slot="receiveAccount" slot-scope="receiveAccount">
                <span>{{receiveAccount}}</span>
                <!-- <a-button v-if="record.orderStatus == 4" @click="copy(receiveAccount)" type="link">复制</a-button> -->
            </div>
            <div slot="withdrawType" slot-scope="withdrawType">
                <span v-if="withdrawType == 1">支付宝提现</span>
                <span v-if="withdrawType == 2">银行卡提现</span>
                <span v-if="withdrawType == 3">FIL提现</span>
            </div>
            <div slot="orderStatus" slot-scope="orderStatus">
                <div v-for="status in orderStatusList" :key="status.id">
                    <span :class="`status${orderStatus}`" v-if="status.id == orderStatus">{{status.name}}</span>
                </div>
            </div>
            <template slot="operation" slot-scope="text, record">
                <div class="editable-row-operations">
                    <a-popconfirm
                        v-if="record.orderStatus == 1 || record.orderStatus == 3"
                        title="是否审核通过当前提现订单?"
                        ok-text="Yes"
                        cancel-text="No"
                        @confirm="operation(record,4)"
                    >
                        <a-button type="link">通过</a-button>
                    </a-popconfirm>
                    <a-button v-if="record.orderStatus == 1" type="link" @click="operation(record,3)">拒绝</a-button>
                </div>
            </template>
        </a-table>

        <!-- 拒绝审核理由 -->
        <a-modal v-model="visible" title="拒绝理由" ok-text="确认" cancel-text="取消" @ok="auditOrder(item,operationStatus)">
            <a-input v-model="remark" type="textarea" allow-clear placeholder="请输入拒绝理由" />
        </a-modal>

        <!-- 导出数据 -->
        <a-modal
            title="导出数据，每页1000条"
            :visible="downloadVisible"
            @ok="downladHandleOk"
            :confirm-loading="confirmLoading"
            @cancel="downloadVisible = false"
            >
            <div>
                <a-pagination v-model="current" :page-size.sync="pageSize" :total="total" show-less-items />
            </div>
        </a-modal>
    </div>
</template>

<script>
import { columns } from './table';
import { queryWithDrawOrder , auditWithDrawOrder , downloadWithDrawOrder } from '@/api/order';
export default {
    data () {
        return {
            brandId: this.global.brandId,
            phone: '',
            userName: '',
            orderCode: '',
            orderStatus: undefined,
            orderStatusList: [
                { id: 1 , name: '待审核' },
                { id: 2 , name: '已取消' },
                { id: 3 , name: '已拒绝' },
                { id: 4 , name: '通过审核' },
                { id: 5 , name: '打款中' },
                { id: 6 , name: '已完成' },
            ],
            accountTypeList: [
                { id: 0 , name: '余额' },
                { id: 5 , name: '积分' },
            ],
            dataList: [],
            total: 0,
            page: 1,
            size: 10,
            item: {},
            operationStatus: '', // 审核状态
            remark: undefined,
            visible: false,
            columns,
            isload: false,
            hasAudit: false,
            colors: ['blue','purple','cyan','green','orange','red','pink','brown','indigo','lime','purple','teal','yellow','amber'],
            confirmLoading: false,
            downloadVisible: false,
            pageSize: 1000,
            current: 1,
        };
    },
    async created(){
        this.getData()
    },
    methods: {
        getData(){
            let _this = this
            _this.isload = true
            const params = {
                'brandId':_this.brandId,
                'phone':_this.phone,
                'userName':_this.userName,
                'orderCode':_this.orderCode,
                'accountType': _this.accountType,
                'orderStatus':_this.orderStatus,
                'size':_this.size,
                'page':_this.page - 1,
            }
            queryWithDrawOrder(params)
            .then(res=>{
                _this.isload = false
                if(res.success){
                    _this.dataList = res.data.content
                    _this.total = res.data.totalElements
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getData()
        },
        // 审核充值订单
        operation(item,status){
            if(status == 3){
                this.item = JSON.parse(JSON.stringify(item))
                this.operationStatus = status
                this.visible = true
            }else{
                this.remark = undefined
                this.auditOrder(item,status)
            }
        },
        // 确定审核订单
        auditOrder(item,status){
            let _this = this
            if(_this.hasAudit){
                return;
            }
            _this.hasAudit = true
            const params = {
                'orderCode':item.orderCode,
                'orderStatus':status,
                'remark':_this.remark,
            }
            auditWithDrawOrder(params)
            .then(res=>{
                _this.hasAudit = false
                if(res.success){
                    _this.$notification['success']({
                        message: '提示',
                        description: status == 3 ? '已拒绝' : '已通过',
                        duration: 8,
                    })
                    _this.visible = false
                    _this.getData()
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        copy(receiveAccount){
            let target = document.createElement('div');
            target.id = 'tempTarget';
            target.style.opacity = '0';
            target.innerText = receiveAccount;
            document.body.appendChild(target);
            let range = document.createRange();
            range.selectNode(target);
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(range);
            document.execCommand('copy');
            window.getSelection().removeAllRanges();
            this.$message.success('复制成功')
        },
        // 导出数据
        downloadData(){
            this.downloadVisible = true
        },
        downladHandleOk(){
            let _this = this
            _this.isload = true
            const params = {
                'brandId':_this.brandId,
                'phone':_this.phone,
                'userName':_this.userName,
                'orderCode':_this.orderCode,
                'accountType': _this.accountType,
                'orderStatus':_this.orderStatus,
                'isDownload': '1',
                'size':_this.pageSize,
                'page':_this.current - 1,
            }
            downloadWithDrawOrder(params)
            .then(res=>{
                _this.isload = false
                if(res){
                    _this.downloadVisible = false;
                    const content = res
                    console.log(res,"res")
                    let blob = new Blob([content], {type: 'application/x-excel'});
                    const fileName = '提现订单列表.xlsx'
                    if ('download' in document.createElement('a')) { // 非IE下载
                        const elink = document.createElement('a')
                        elink.download = fileName
                        elink.style.display = 'none'
                        elink.href = URL.createObjectURL(blob)
                        document.body.appendChild(elink)
                        elink.click()
                        URL.revokeObjectURL(elink.href) // 释放URL 对象
                        document.body.removeChild(elink)
                    } else { // IE10+下载
                        navigator.msSaveBlob(blob, fileName)
                    }
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
    }
}

</script>
<style scoped lang="less">
.status0{
    color: @primary-color;
}
.status1{
    color: #faad14
}
.status2{
    color: #f5222d
}
.status3{
    color: #f5222d
}
.status4{
    color: #52c41a
}
.status5{
    color: #faad14
}
.status6{
    color: #52c41a
}
</style>